<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div class="w-1200 margin-0-auto page-warp clear">
    <div class="page">
        <div class="p-wrap">
                <span class="p-num">
                	<input type="hidden" name="totalPages" id="totalPages" value="${page.totalPages }" />
                	<input type="hidden" name="page" id="page" value="${page.page }" />
                	<input type="hidden" name="styleID" id="styleID" value="${brandStyleDTO.styleID }" />
                	<c:choose>  
					   <c:when test="${page.page == 1}">
					   	<a class="pn-prev disabled" ><i>&lt;</i><em>上一页</em></a>
					   </c:when>  
					   <c:otherwise>
					   	<a class="pn-prev"><i>&lt;</i><em>上一页</em></a>
					   </c:otherwise>  
					</c:choose>  
					<c:choose>  
						<c:when test="${page.totalPages < 8}">
							<c:forEach begin="1" end="${page.totalPages }" varStatus="s">
								<c:choose>  
								   <c:when test="${s.index == page.page	 }">
								   	<a class="curr page-item">${s.index }</a>
								   </c:when>  
								   <c:otherwise>
								   	<a class="page-item">${s.index }</a>
								   </c:otherwise>  
								</c:choose>  
							</c:forEach>
						</c:when>	
						<c:otherwise>
							<c:choose>
								<c:when test="${page.page < 4 }">
									<c:forEach begin="1" end="3" varStatus="s">
										<c:choose>  
										   <c:when test="${s.index == page.page	 }">
										   	<a class="curr page-item">${s.index }</a>
										   </c:when>  
										   <c:otherwise>
										   	<a class="page-item">${s.index }</a>
										   </c:otherwise>  
										</c:choose>
									</c:forEach>
									<b class="pn-break" class="page-item"> …</b>
									<a class="page-item">${page.totalPages }</a>
								</c:when>
								<c:when test="${page.page > page.totalPages-3 }">
									<a class="page-item">1</a>
									<b class="pn-break" class="page-item"> …</b>
									<c:forEach begin="${page.totalPages-3 }" end="${page.totalPages }" varStatus="s">
										<c:choose>  
										   <c:when test="${s.index == page.page	 }">
										   	<a class="curr page-item">${s.index }</a>
										   </c:when>  
										   <c:otherwise>
										   	<a class="page-item">${s.index }</a>
										   </c:otherwise>  
										</c:choose>
									</c:forEach>
								</c:when>
								<c:otherwise>
									<a class="page-item">1</a>
									<b class="pn-break" class="page-item"> …</b>
									<c:forEach begin="${page.page-1 }" end="${page.page+1 }" varStatus="s">
										<c:choose>  
										   <c:when test="${s.index == page.page	 }">
										   	<a class="curr page-item">${s.index }</a>
										   </c:when>  
										   <c:otherwise>
										   	<a class="page-item">${s.index }</a>
										   </c:otherwise>  
										</c:choose>
									</c:forEach>
									<b class="pn-break" class="page-item"> …</b>
									<a class="page-item">${page.totalPages }</a>
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
					
					
					<c:choose>  
					   <c:when test="${page.page == page.totalPages}">
					   	<a class="pn-next disabled">下一页<i>&gt;</i></a>
					   </c:when>  
					   <c:otherwise>
					   	<a class="pn-next">下一页<i>&gt;</i></a>
					   </c:otherwise>  
					</c:choose>
					
                    </span>
                <span class="p-skip">
                    <em>共<b>${page.totalPages }</b>页&nbsp;&nbsp;</em>
                </span>
        </div>
    </div>
  </div>
  <script type="text/javascript">
	var page = $('#page').val();
	var pageint = parseInt(page);
	var totalPage = $('#totalPage').val();
	var styleID = $('#styleID').val();
	
	function prevPage() {   //前一页
		var prevPage = pageint - 1;
		gotoPage(prevPage,styleID);
	}
	
	function nextPage() {   //后一页
		var nextPage = pageint + 1;
		gotoPage(nextPage,styleID);
	}
	
	function clickPage(pageNum) {   //点击页码前进
		gotoPage(pageNum,styleID);
	}
	
    $(document).ready(function(){
        $('.pn-prev').on('click',function() {
	    	if(!$(this).hasClass('disabled')) {
	    		prevPage();
	    	}
	    });
	    $('.pn-next').on('click',function() {
	    	if(!$(this).hasClass('disabled')) {
	    		nextPage();
	    	}
	    });
	    $('.page-item').on('click',function() {
	    	var pageNum = $(this).text();
	    	clickPage(pageNum);
	    });
    }); 
 </script>